<template>
    <div class="commodityCirculation">
        <div class="commodityCirculation_header">
            <div class="inventory">{{ datas.stockInfo.stockAvailable }} <span>件</span> </div>
            <div class="title">当前库存</div>
        </div>
        <div class="warehousing">
            <div class="warehousing_header">
                <div class="warehousing_header_left">
                    <van-image :src="ruku"></van-image>
                    入库数量
                </div>
                <div class="warehousing_header_right">
                    <span v-if="inventoryQuantity > 0">+</span>{{ inventoryQuantity }}件
                </div>
            </div>
            <div class="warehousing_div warehousing_div_border" v-for="(item, index) in inventoryRecord" :key="index">
                <div class="warehousing_div_left">{{ item.businessName }}</div>
                <div class="warehousing_div_right colors">{{ '+' + Number(item.quantity) }}件</div>
                <div class="warehousing_div_right">{{ item.createTime }}</div>
            </div>
        </div>

        <div class="warehousing">
            <div class="outbound_header">
                <div class="outbound_header_left">
                    <van-image :src="chuku"></van-image>
                    出库数量
                </div>
                <div class="outbound_header_right">
                    <span v-if="outboundQuantity > 0">-</span>{{ outboundQuantity }}件
                </div>
            </div>
            <div class="warehousing_div warehousing_div_border" v-for="(item, index) in outboundRecord" :key="index">
                <div class="warehousing_div_left">{{ item.businessName }}</div>
                <div class="warehousing_div_right colorsred">-{{ Number(item.quantity) }}件</div>
                <div class="warehousing_div_right">{{ item.createTime }}</div>
            </div>

        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const chuku = new URL("@/assets/productHome/icon_chuku.png", import.meta.url).href;
const ruku = new URL("@/assets/productHome/icon_ruku1.png", import.meta.url).href;
import { statisticsStock, stockRecordList } from '@/api/productHome/index'
/** 流转数据 */
const datas: any = computed(() => {
    return JSON.parse(route.query.datas as any)
})
// 入库数量
const inventoryQuantity = ref()
// 出库数量
const outboundQuantity = ref()
// 入库
const inventoryRecord = ref()
// 出库
const outboundRecord = ref<any>()
onMounted(async () => {
    const resTotal = await statisticsStock({
        productsId: datas.value.id,
    })
    inventoryQuantity.value = Number(resTotal.inTotal) || 0
    outboundQuantity.value = Number(resTotal.outTotal) || 0
    // 入库记录
    const inventoryRecords = await stockRecordList({
        productsId: datas.value.id,
        type: 1
    })
    inventoryRecord.value = inventoryRecords.rows || []
    // 出库记录
    const outboundRecords = await stockRecordList({
        productsId: datas.value.id,
        type: 2
    })
    outboundRecord.value = outboundRecords.rows || []
})


</script>


<style lang="less" scoped>
.commodityCirculation {
    height: calc(100vh - 90px);
    width: 100%;
    background: #F6FAFF;
    box-sizing: border-box;
    overflow: auto;

    .commodityCirculation_header {
        width: 100%;
        height: 122px;
        background: linear-gradient(180deg, #DDF0FE 0%, #FFFFFF 100%);
        text-align: center;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        align-content: center;

        .inventory {
            width: 100%;
            font-weight: 500;
            font-size: 50px;
            color: #1A1B1C;

            span {
                font-weight: 400;
                font-size: 24px;
                color: #1A1B1C;
            }
        }

        .title {
            width: 100%;
            font-weight: 400;
            font-size: 14px;
            color: #1A1B1C;
        }
    }

    .warehousing {
        width: 345px;
        // height: 270px;
        background: #FFFFFF;
        border-radius: 5px;
        margin: 10px auto;
        box-sizing: border-box;
        padding: 15px;

        .warehousing_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
            font-size: 16px;
            color: #0094FF;

            .warehousing_header_left {
                display: flex;
                align-items: center;

                .van-image {
                    margin-right: 10px;
                    width: 44px;
                    height: 44px;
                }
            }
        }

        .outbound_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
            font-size: 16px;
            color: #FC2540;

            .outbound_header_left {
                display: flex;
                align-items: center;

                .van-image {
                    margin-right: 10px;
                    width: 44px;
                    height: 44px;
                }
            }
        }

        .warehousing_div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 0;

            .warehousing_div_left {
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
                width: 85px;
            }

            .warehousing_div_right {
                font-weight: 400;
                font-size: 14px;
                color: #B8BECA;
            }

            .colors {
                color: #0094FF;
            }

            .colorsred {
                color: #FC2540;
            }
        }

        .warehousing_div_border {
            border-bottom: 1px solid #FAFAFF;
        }
    }
}
</style>